<template>
  <div>
    <h1 style="text-align: center">学生管理系统首页</h1>
    <!--   卡片  -YahuiLi   -->
    <el-card  shadow="always" class="box-card">
        <template #header>
            <div class="card-header">
                <span>便捷面板</span>
                <el-button class="button" text>Operation button</el-button>
            </div>
        </template>
        <div>
            <el-avatar class="line"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <span class="line">&nbsp;&nbsp;&nbsp;-在线员工</span>
        </div>
<!--        <p v-for="o in 3" :key="o" class="text item">{{ 'List item ' + o }}</p>-->
    </el-card>

    <div id="map">
        <div  v-for="o in 9"  title="" v-on:click="zhanDian" class=""></div>
    </div>

    <el-carousel :interval="4000" type="card" height="300px" style="width: 800px">
      <el-carousel-item v-for="item in 6" :key="item">
<!--        <h3 text="2xl" justify="center">{{ item }}</h3>-->
        <el-image style="width: 400px; height: 300px" :src="url" fit="cover"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  setup() {
    const url = 'test1.jpeg'

    return {
      url
    }
  },
    methods:{
      zhanDian(event){
          let target = event.target;
          if(target.title == "" || target.title == "error" ){
              target.title= "yuan"
              target.classList.add("yuan")
              target.classList.remove("error")
          }else if(target.title == "yuan"){
              target.title= "error"
              target.classList.add("error")
              target.classList.remove("yuan")
          }
      }
    }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.el-carousel {
  margin: 50px auto;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    width: 480px;
    margin: 40px 0px 0px 60px;
}

.line{
    vertical-align: middle;
}

#map{
    width: 600px;
    height: 600px;
    margin: 10px auto;
    background-color: ghostwhite;
    display: flex;
    flex-wrap: wrap;
}

#map div{
    width: 200px;
    height: 200px;
    border: 1px yellow solid;
    box-sizing: border-box;
    position: relative;
}

/*圆球*/
#map .yuan::before{
    content: "";
    position: absolute;
    left: 25px;
    top: 25px;
    width: 150px;
    height: 150px;
    border: 5px red solid;
    box-sizing: border-box;
    border-radius: 125px;
}

/*X 叉叉*/
#map .error::before{
    content: "";
    position: absolute;
    left: -16px;
    top: 50px;
    width: 100px;
    height: 100px;
    border: 5px black solid;
    box-sizing: border-box;
    transform: rotateZ(45deg);
    border-bottom: none ;
    border-left: none ;
}
#map .error::after{
    content: "";
    position: absolute;
    right: -21px;
    top: 50px;
    width: 100px;
    height: 100px;
    border: 5px black solid;
    border-top: none ;
    border-right: none ;
    box-sizing: border-box;
    transform: rotateZ(45deg);
}

#map div:hover{
    width: 200px;
    height: 200px;
    border: 1px yellow solid;
    box-sizing: border-box;
}


</style>